<template>
  <area-layout>
    <template slot-scope="row">
      <template v-if="row.currentAreaId">
        <section class="roster-container">
          <!-- 模式切换 -->
          <section class="mode-select" v-if="row.currentAreaId.length">
            显示模式：
            <a-radio-group v-model="currentMode">
              <a-radio value="1">
                统计表
              </a-radio>
              <a-radio value="2">
                明细表
              </a-radio>
            </a-radio-group>
          </section>

          <Statistics
            :currentAreaId="row.currentAreaId"
            v-if="currentMode === '1'"
          />
          <template v-else>
            <RosterLargeList
              v-if="isLarge"
              :currentAreaId="row.currentAreaId"
            />
            <RosterList
              v-else
              :currentAreaId="row.currentAreaId"
            />
          </template>
        </section>
      </template>
    </template>
  </area-layout>
</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件

import { areaServices } from '@/common/services'
import AreaTree from '@/components/src/AreaTree'
import AreaLayout from '@/layouts/AreaLayout.vue'
import RosterList from './RosterList.vue'
import RosterLargeList from './RosterLargeList.vue'
import Statistics from './Statistics.vue'
import { userModule } from '@/store/modules/user'

export default {
  name: 'StandardList',
  components: {
    AreaTree,
    AreaLayout,
    RosterList,
    RosterLargeList,
    Statistics
  },
  data () {
    return {
      data: [],
      currentAreaId: '',
      currentMode: '1'
    }
  },
  computed: {
    isLarge () {
      return userModule.isLarge
    }
  },
  mounted () {
  },
  methods: {
    handlerTreeSelect (data) {
      this.currentAreaId = data.s_a_id
      // 社级直接默认明细
      if (this.currentAreaId.length === 14) {
        this.currentMode = '2'
      }
    },
  }
}
</script>

<style lang="less" scoped>
.member-container {
  display: flex;
  .area-tree {
    width: 300px;
    flex: none;
    background-color: #fff;
    border-right: 1px solid #eee;
    margin-right: 10px;
  }
}
.member-list {
  display: flex;
  flex-direction: column;
}
.roster-container {
  position: relative;
}
.mode-select {
  position:absolute;
  right: 20px;
  top: 16px;
  z-index: 2;
}
</style>
